<template>
  <a-modal
    :open="visible"
    title="🚨 紧急处理"
    width="800px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="emergency-handling">
      <!-- 紧急情况选择 -->
      <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
        <a-form-item label="紧急情况类型" name="emergencyType">
          <a-radio-group v-model:value="formData.emergencyType">
            <a-radio value="trauma">外伤</a-radio>
            <a-radio value="poisoning">中毒</a-radio>
            <a-radio value="respiratory">呼吸困难</a-radio>
            <a-radio value="seizure">抽搐</a-radio>
            <a-radio value="bleeding">大出血</a-radio>
            <a-radio value="other">其他</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="宠物名称" name="petName">
              <a-input
                v-model:value="formData.petName"
                placeholder="请输入宠物名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="主人姓名" name="ownerName">
              <a-input
                v-model:value="formData.ownerName"
                placeholder="请输入主人姓名"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="联系电话" name="phone">
              <a-input
                v-model:value="formData.phone"
                placeholder="请输入联系电话"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="紧急程度" name="urgencyLevel">
              <a-select
                v-model:value="formData.urgencyLevel"
                placeholder="请选择紧急程度"
              >
                <a-select-option value="critical">危重</a-select-option>
                <a-select-option value="urgent">紧急</a-select-option>
                <a-select-option value="moderate">一般</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="症状描述" name="symptoms">
          <a-textarea
            v-model:value="formData.symptoms"
            :rows="3"
            placeholder="请详细描述宠物的症状和情况"
          />
        </a-form-item>

        <a-form-item label="处理措施" name="treatment">
          <a-textarea
            v-model:value="formData.treatment"
            :rows="3"
            placeholder="请描述已采取的处理措施"
          />
        </a-form-item>

        <a-form-item label="备注" name="notes">
          <a-textarea
            v-model:value="formData.notes"
            :rows="2"
            placeholder="其他需要说明的信息"
          />
        </a-form-item>
      </a-form>

      <!-- 快速操作按钮 -->
      <div class="quick-actions">
        <a-divider>快速操作</a-divider>
        <a-space wrap>
          <a-button type="primary" danger @click="callEmergency">
            📞 拨打急救电话
          </a-button>
          <a-button type="primary" @click="notifyDoctor">
            👨‍⚕️ 通知值班医生
          </a-button>
          <a-button @click="prepareEquipment"> 🏥 准备急救设备 </a-button>
          <a-button @click="checkInventory"> 💊 检查药品库存 </a-button>
        </a-space>
      </div>

      <!-- 紧急联系人 -->
      <div class="emergency-contacts">
        <a-divider>紧急联系人</a-divider>
        <a-row :gutter="16">
          <a-col
            :span="8"
            v-for="contact in emergencyContacts"
            :key="contact.id"
          >
            <a-card size="small" class="contact-card">
              <div class="contact-info">
                <div class="contact-name">{{ contact.name }}</div>
                <div class="contact-role">{{ contact.role }}</div>
                <div class="contact-phone">{{ contact.phone }}</div>
                <a-button
                  type="link"
                  size="small"
                  @click="callContact(contact)"
                >
                  拨打
                </a-button>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible',value: boolean): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();

// 表单数据
const formData = ref({
  emergencyType: '',
  petName: '',
  ownerName: '',
  phone: '',
  urgencyLevel: '',
  symptoms: '',
  treatment: '',
  notes: '',
});

// 表单验证规则
const rules = {
  emergencyType: [{ required: true, message: '请选择紧急情况类型' }],
  petName: [{ required: true, message: '请输入宠物名称' }],
  ownerName: [{ required: true, message: '请输入主人姓名' }],
  phone: [
    { required: true, message: '请输入联系电话' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  urgencyLevel: [{ required: true, message: '请选择紧急程度' }],
  symptoms: [{ required: true, message: '请描述症状' }],
};

// 紧急联系人
const emergencyContacts = ref([
  {
    id: '1',
    name: '张医生',
    role: '急诊科主任',
    phone: '13800138001',
  },
  {
    id: '2',
    name: '李医生',
    role: '外科医生',
    phone: '13800138002',
  },
  {
    id: '3',
    name: '王护士',
    role: '急诊护士',
    phone: '13800138003',
  },
]);

// 方法
const resetForm = () => {
  formData.value = {
    emergencyType: '',
    petName: '',
    ownerName: '',
    phone: '',
    urgencyLevel: '',
    symptoms: '',
    treatment: '',
    notes: '',
  };
};

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里可以调用API保存紧急处理记录
    message.success('紧急处理记录已保存');
    emit('update:visible', false);
    resetForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};

// 快速操作
const callEmergency = () => {
  message.success('正在拨打急救电话...');
  // 这里可以集成电话拨打功能
};

const notifyDoctor = () => {
  message.success('已通知值班医生');
  // 这里可以发送通知给值班医生
};

const prepareEquipment = () => {
  message.success('正在准备急救设备');
  // 这里可以显示急救设备清单
};

const checkInventory = () => {
  message.success('正在检查药品库存');
  // 这里可以显示药品库存状态
};

const callContact = (contact: any) => {
  message.success(`正在拨打 ${contact.name} 的电话: ${contact.phone}`);
  // 这里可以集成电话拨打功能
};
</script>

<style scoped>
.emergency-handling {
  max-height: 600px;
  overflow-y: auto;
}

.quick-actions {
  margin: 24px 0;
}

.emergency-contacts {
  margin-top: 24px;
}

.contact-card {
  margin-bottom: 16px;
}

.contact-info {
  text-align: center;
}

.contact-name {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.contact-role {
  margin-bottom: 4px;
  font-size: 12px;
  color: #8c8c8c;
}

.contact-phone {
  margin-bottom: 8px;
  font-size: 14px;
  color: #1890ff;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-radio-group) {
  display: flex;
  gap: 16px;
}
</style>
